import { Fragment, defineComponent, reactive } from 'vue';
import { navPage, top, arrowTop, tips, bottom, rightWrap, info1, content1, content2, content3, info2, leftWrap, close, mask, end, endTitle, wrap, header, infoWrap, content, floor, navWrap, navEnd, abort, abortTitle, navCancelBtn, navQuitBtn } from './Nav.module.scss';
import { map, navi, poi } from '@/store';
import { fmapObj } from '../fmap/Fmap';
import { realNaviStop } from '@/utils/record';
/*
---文件
*/
export const navObj = reactive({
    remain: 0,//剩余距离
    title: '',//信息提示
    maskFlag: false,
    endFlag: false,
    abortFlag: false,
})
export default defineComponent({
    name: 'Nav.',
    data() {
        return {
            arrowUrl: this.$cosUrl + "nav/assets/img/arrow-top.png",
        };
    },
    methods: {
        navQuit() {
            this.navCancel();
            poi.infoType = "details";
            map.menuFlag = true;
            map.curPageType = "menu";
            map.navFlag = false;
            map.routeInputFlag = false;
            map.searchFlag = false;
            fmapObj.top = "0";
            poi.type = "end";
            navi.resetNavigation();
            if (fmapObj.isRecord) realNaviStop();
        },
        navCancel() {
            navObj.maskFlag = false;
            navObj.endFlag = false;
            navObj.abortFlag = false;
        },
        AbortDialog() {
            navObj.maskFlag = true;
            navObj.abortFlag = true;
        },
    },
    render() {
        return <Fragment>
            <div class={navPage} v-show={map.navFlag}>
                <div class={top}>
                    <img class={arrowTop} src={this.arrowUrl} />
                    <span class={tips}>{navObj.title}</span>
                </div>

                <div class={bottom}>
                    <div class={rightWrap}>
                        <div class={info1}>
                            <span class={content1}>终点: </span>
                            {poi.end.floorId - 1 > 0 ? <span class={content3}>{poi.end.floorId - 1}F</span> : <span class={content3}>MB</span>}
                            <span class={content2} style={{ marginLeft: '3px' }}>{poi.end.poiName}</span>
                        </div>
                        {navObj.remain > 0 && <div class={info2}><span class={content1}>剩余{navObj.remain}米</span></div>}
                    </div>

                    <div class={leftWrap}>
                        <span class={close} onClick={this.AbortDialog}>退出</span>
                    </div>
                    {/* <span class={tips}>已重新规划路线</span> */}
                </div>

                {navObj.maskFlag && (<div class={mask}>
                    {navObj.endFlag && <div class={end}>
                        <span class={endTitle}>您已到达目的地</span>
                        <div class={wrap}>
                            <img class={header} src={poi.end.poiImgMoblie} />
                            <div class={infoWrap}>
                                <span class={content}>{poi.end.poiName}</span>
                                {poi.end.floorId - 1 > 0 ? <span class={floor}>{poi.end.floorId - 1}F</span> : <span class={floor}>MB</span>}
                            </div>
                        </div>
                        <div class={navWrap}>
                            <span class={navEnd} onClick={this.navQuit}>导航结束</span>
                        </div>
                    </div>}
                    {navObj.abortFlag && <div class={abort}>
                        <span class={abortTitle}>是否退出当前导航</span>
                        <div class={navWrap}>
                            <span class={navCancelBtn} onClick={this.navCancel}>取 消</span>
                            <span class={navQuitBtn} onClick={this.navQuit}>退 出</span>
                        </div>
                    </div>}
                </div>)}
            </div>
        </Fragment>;
    },
});